
import React, { useState } from 'react';
import { Divider, Input, Row, Col, Button, message, PageHeader } from 'antd'
import { rakebackRecharge, rakebackFirstValue, rakebackSecondValue } from '@/api/commission'


export default (props) => {
  const [ratio, setratio] = useState(0)
  const [firstvalue, setfirstValue] = useState('')
  const [secondValue, setsecondValue] = useState('')
  const handleChangeRatio = e => {
    setratio(e.target.value);
  }
  const handleChangeFirst = e => {
    setfirstValue(e.target.value);
  }
  const handleChangeSecond = e => {
    setsecondValue(e.target.value);
  }
  const handleSubmitRecharge = () => {
    if (!/^(0.\d+|0|1)$/.test(ratio)) {
      return message.warning('请输入0-1的数字');
    }
    rakebackRecharge({ ratio }).then(() => {
      message.success('设置成功!')
    }).catch(e => {
      message.error('设置失败!')
    })
  };

  const handleSubmitFirstValue = () => {
    const value = Number(firstvalue);
    if (!/^\d+(?=\.{0,1}\d+$|$)/g.test(value)) {
      return message.warning('请输入正数');
    }
    rakebackFirstValue({ value }).then(() => {
      message.success('设置成功!')
    }).catch(e => {
      message.error('设置失败!')
    })
  };

  const handleSubmitSecondValue = () => {
    const value = Number(secondValue);
    if (!/^\d+(?=\.{0,1}\d+$|$)/g.test(value)) {
      return message.warning('请输入0-1的数字');
    }
    rakebackSecondValue({ value }).then(() => {
      message.success('设置成功!')
    }).catch(e => {
      message.error('设置失败!')
    })
  };

  return (
    <>
      <PageHeader
        title="佣金设置" 
      />
      <Divider dashed />
      <Divider orientation="left">设置充值返佣比例</Divider>
      <Row className='mb40'>
        <Col span={12}>
          <Input value={ratio} onChange={handleChangeRatio}  placeholder="input number between 0 - 1" />
        </Col>
        <Col span={12}>
          <Button onClick={handleSubmitRecharge} type="primary">设置</Button>
        </Col>
      </Row>

      <Divider orientation="left">设置一级邀请返佣金额</Divider>
      <Row className='mb40'>
        <Col span={12}>
          <Input prefix="￥" type='number' value={firstvalue} onChange={handleChangeFirst} suffix="RMB" placeholder="input possitive number" />
        </Col>
        <Col span={12}>
          <Button onClick={handleSubmitFirstValue} type="primary">设置</Button>
        </Col>
      </Row>

      <Divider orientation="left">设置二级邀请返佣金额</Divider>
      <Row className='mb40'>
        <Col span={12}>
          <Input prefix="￥" type='number' value={secondValue} onChange={handleChangeSecond} suffix="RMB" placeholder="input possitive number" />
        </Col>
        <Col span={12}>
          <Button onClick={handleSubmitSecondValue} type="primary">设置</Button>
        </Col>
      </Row>


    </>
  )
}